<!--长效养护-->
<template>
 <page-meta :page-font-size="baseFontSize + 'rpx'" :root-font-size="baseFontSize + 'rpx'"></page-meta>
  <view class="content">
    <!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
    <z-paging
      ref="paging"
      v-model="dataList"
      :auto-clean-list-when-reload="false"
      :auto-scroll-to-top-when-reload="false"
      :refresher-status.sync="refresherStatus"
      @query="loadList"
    >
      <!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
      <view style="z-index: 100; position: sticky; top: 0">
        <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
        <app-tabs
          v-model="tabIndex"
          :tabs="tabs"
          @change="tabChange"
        ></app-tabs>
        <uni-search-bar
          v-model="searchValue"
          bgColor="#F7F8FA"
          radius="5"
          placeholder="请输入设施/部位/构件名称"
          clearButton="auto"
          cancelButton="none"
          @input="search"
        />
      </view>
      <!-- 自定义下拉刷新view -->
      <!-- <template #refresher>
				<custom-refresher :status="refresherStatus" />
			</template> -->
      <view class="item" v-for="(item, index) in dataList">
        <view
          class="item"
          @tap="
            navTo(
              `/pages/richangxuncha/changxiaoyanghuxiaoqing?id=${item.taskId}&projectName=${item.taskName}&longTypeName=${item.longTypeName}&facilityName=${item.facilityName}&placeName=${item.partNames}&compName=${item.compNames}&componentId=${item.compIds}&frequencyValue=${item.frequencyValue}`
            )
          "
        >
          <view class="flex justify-between align-center">
            <text class="name">{{ item.taskName }}</text>
            <uni-icons type="forward" size="16" color="#597EF7"></uni-icons>
          </view>
          <view class="flex justify-between align-end">
            <view class="time">
              <view
                >{{ item.facilityName }}-{{ item.partNames }}-{{
                  item.compNames
                }}</view
              >
              <view>长效类型：{{ item.longTypeName }}</view>
              <view>养护周期：{{ item.frequencyValue }}</view>
            </view>
            <view
              class="btn"
              @tap="
                navTo(
                  `/pages/addForm/changxiaoyanghu?id=${item.taskId}&projectName=${item.taskName}&facilityName=${item.facilityName}&placeName=${item.partNames}&compName=${item.compNames}&componentId=${item.compIds}&frequencyValue=${item.frequencyValue}`
                )
              "
              >任务上报</view
            >
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import appTabs from '@/components/app-tabs.vue'
import {getDmTaskListApi} from '@/api/system/changxiao.js'
export default {
  mixins: [MescrollMixin],
  components: {appTabs},
  data() {
    return {
      list: 20,
      tabIndex: 0,
      tabs: [
        {
          name: '待完成',
          value: 0
        },
        {
          name: '已完成',
          value: 1
        }
      ],
      topH: 190,
      dataList: [],
      refresherStatus: 0,
      searchValue: ''
    }
  },computed: {
		baseFontSize() {
			return this.$store.getters.fontSize;
		}
	},
  methods: {
    search(e) {
      this.loadList(1, 10)
    },
    tabChange(e) {
      this.$refs.paging.reload()
    },
    loadList(pageNo, pageSize) {
      // 调用接口获取列表数据
      getDmTaskListApi({
        taskName: this.searchValue,
        isFinished: this.tabIndex,
        pageNo: pageNo,
        taskType: 0,
        userId: uni.getStorageSync('userInfo').id,
        pageSize: pageSize
      })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
        .catch((res) => {
          this.$refs.paging.complete(false)
        })
    },
    downCallback() {
      this.mescroll.resetUpScroll()
    },
    upCallback() {
      // this.getProductList();
    },
    navTo(path) {
      this.$tab.navigateTo(path)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
.list-area {
  height: 300upx;
}
.u-page {
  background: #fff;
  height: 100vh;
}
.top-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 0 22upx;
}
.btn {
  color: #fff;
  width: 160upx;
  height: 48upx;
  background: #597ef7;
  border-radius: 8upx;
  color: #fff;
  line-height: 48upx;
  text-align: center;
}
/deep/.uni-searchbar {
  background: #f1f1f1;
}
</style>
